<template>
<div>
    <!-- 头部搜索 和按钮 start -->
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
    <el-col :span="7">
        <el-form-item label="合同标题" prop="ContractTitle">
            <el-input v-model="formData.ContractTitle" placeholder="请输入合同标题" clearable :style="{width: '100%'}">
            </el-input>
        </el-form-item>
    </el-col>
    <el-col :span="7">
        <el-form-item label="外协单位" prop="CarriageUnit">
            <el-input v-model="formData.CarriageUnit" placeholder="请输入外协单位" clearable :style="{width: '100%'}">
            </el-input>
        </el-form-item>
    </el-col>
    <el-col :span="7">
        <el-form-item label="外协负责人" prop="CarriageMan">
            <el-input v-model="formData.CarriageMan" placeholder="请输入外协负责人" clearable :style="{width: '100%'}">
            </el-input>
        </el-form-item>
    </el-col>
    <el-col :span="7">
        <el-form-item label="经办人" prop="Operator">
            <el-input v-model="formData.Operator" placeholder="请输入经办人" clearable :style="{width: '100%'}">
            </el-input>
        </el-form-item>
    </el-col>
    <el-col :span="7">
        <el-form-item label="签订时间" prop="SignedTime">
            <el-input v-model="formData.SignedTime" placeholder="请输入签订时间" clearable :style="{width: '100%'}">
            </el-input>
        </el-form-item>
    </el-col>
    <el-col :span="7">
        <el-form-item label="审批状态" prop="State">
            <el-input v-model="formData.State" placeholder="请输入审批状态" clearable :style="{width: '100%'}">
            </el-input>
        </el-form-item>
    </el-col>
    <el-button
        type="primary"
        @click="sel()"
        size="small"
        plain
        ><i class="el-icon-search"></i>查询
    </el-button>
    <el-col :span="7">
        <el-form-item label="重置" prop="Reset">
            <el-button type="primary" icon="el-icon-refresh" size="medium"> 重置 </el-button>
        </el-form-item>
    </el-col>
    <el-button
        type="primary"
        @click="dialogFormVisible = true"
        size="small"
        plain
        ><i class="el-icon-plus"></i>新增
    </el-button>
    <el-col :span="5">
        <el-form-item label="删除" prop="Delete">
            <el-button type="primary" icon="el-icon-remove-outline" size="medium"> 删除 </el-button>
        </el-form-item>
    </el-col>
    </el-form>
    <!-- 头部搜索 和按钮 end -->

    <!-- 表格 -->
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        prop="contractNum"
        label="合同编号"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="contractTitle"
        label="合同标题"
        width="120">
    </el-table-column>
    <el-table-column
        prop="carriageUnit"
        label="外协单位"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="carriageMan"
        label="外协负责人"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="Line"
        label="线路"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="freightRates"
        label="吨位价"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="charterConditionTonnage"
        label="包车条件吨位"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="charterValue"
        label="包车金额"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="signedTime"
        label="签订日期"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="operator"
        label="经办人"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="创建时间"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="approver"
        label="审批人"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
            <el-button
                @click="(dialogFormVisibleSel = true),handleClick(scope.row.id)"
                type="text"
                size="small"
                ><i class="el-icon-success"></i>查看</el-button>
            <el-button
                type="text"
                size="small"
                @click="(dialogFormVisibleEdit = true),EditCarr(scope.row.id)"
                ><i class="el-icon-edit"></i>编辑
            </el-button>
            <el-button
                type="text"
                size="small" @click="SingledelCarry(scope.row.id)"
                ><i class="el-icon-close"></i>删除
            </el-button>
        </template>
    </el-table-column>
    </el-table>
    
    <!-- 添加start -->
    <el-dialog title="新增合同" :visible.sync="dialogFormVisible">
        <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="110px"
            class="demo-ruleForm"
        >
        <el-form-item label="合同标题" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleForm.ContractTitle"
                    placeholder="请输入合同标题"
                ></el-input>
            </el-col>
        </el-form-item>
        <!-- <el-form-item label="合同编号" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleForm.ContractNum"
                    placeholder="请输入合同编号"
                ></el-input>
            </el-col>
        </el-form-item> -->
        <el-form-item label="创建人" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleForm.CreatorId"
                    placeholder="请输入创建人编号"
                ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="承运单位" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleForm.CarriageUnit"
                    placeholder="请输入承运单位"
                ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="承运负责人" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleForm.CarriageMan"
                    placeholder="请输入承运负责人"
                ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="线路" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleForm.Line"
                    placeholder="请输入线路"
                ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="吨运价" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleForm.FreightRates"
                    placeholder="请输入吨运价"
                ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="包车条件吨位" required>
            <el-col :span="11">
                <el-input
                    placeholder="请输入包车条件吨位"
                    v-model="ruleForm.CharterConditionTonnage"
                >
                </el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="包车金额" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleForm.CharterValue"
                    placeholder="请输入包车金额"
                ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="经办人" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleForm.Operator"
                    placeholder="请输入经办人"
                ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="审批人" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleForm.Approver"
                    placeholder="请输入审批人"
                ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="附件地址" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleForm.Accessory"
                    placeholder="请输入附件地址"
                ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="签订时间" >
            <el-date-picker
            v-model="ruleForm.SignedTime"
            align="right"
            type="date"
            placeholder="请输入签订时间">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="合同金额" required>
            <el-col :span="11">
                <el-input
                    placeholder="请输入合同金额"
                    v-model="ruleForm.ContractMoney"
                >
                </el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="合同标的或项目说明" required>
            <el-col :span="11">
                <el-input
                    type="textarea"
                    :rows="4"
                    v-model="ruleForm.ProjectDescription"
                >
                </el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="合同主要条款/变更条款" required>
            <el-col :span="11">
                <el-input
                    type="textarea"
                    :rows="4"
                    v-model="ruleForm.MainClause"
                >
                </el-input>
            </el-col>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCarry()">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 添加end -->

    <!-- 修改start -->
    <el-dialog title="修改合同" :visible.sync="dialogFormVisibleEdit">
        <el-form
            :model="ruleFormEdit"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="110px"
            class="demo-ruleForm"
        >
        <el-form-item label="合同标题" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleFormEdit.contractTitle"
                    placeholder="请输入合同标题"
                ></el-input>
            </el-col>
        </el-form-item>
        <!-- <el-form-item label="合同编号" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleFormEdit.contractNum"
                    placeholder="请输入合同编号"
                ></el-input>
            </el-col>
        </el-form-item> -->
        <el-form-item label="创建人" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleFormEdit.creatorId"
                    placeholder="请输入创建人编号"
                ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="承运单位" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleFormEdit.carriageUnit"
                    placeholder="请输入承运单位"
                ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="承运负责人" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleFormEdit.carriageMan"
                    placeholder="请输入承运负责人"
                ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="线路" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleFormEdit.line"
                    placeholder="请输入线路"
                ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="吨运价" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleFormEdit.freightRates"
                    placeholder="请输入吨运价"
                ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="包车条件吨位" required>
            <el-col :span="11">
                <el-input
                    placeholder="请输入包车条件吨位"
                    v-model="ruleFormEdit.charterConditionTonnage"
                >
                </el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="包车金额" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleFormEdit.charterValue"
                    placeholder="请输入包车金额"
                ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="经办人" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleFormEdit.operator"
                    placeholder="请输入经办人"
                ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="审批人" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleFormEdit.approver"
                    placeholder="请输入审批人"
                ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="附件地址" required>
            <el-col :span="11">
                <el-input
                    v-model="ruleFormEdit.accessory"
                    placeholder="请输入附件地址"
                ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="签订时间" >
            <el-date-picker
            v-model="ruleFormEdit.signedTime"
            align="right"
            type="date"
            placeholder="请输入签订时间">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="合同金额" required>
            <el-col :span="11">
                <el-input
                    placeholder="请输入合同金额"
                    v-model="ruleFormEdit.contractMoney"
                >
                </el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="合同标的或项目说明" required>
            <el-col :span="11">
                <el-input
                    type="textarea"
                    :rows="4"
                    v-model="ruleFormEdit.projectDescription"
                >
                </el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="合同主要条款/变更条款" required>
            <el-col :span="11">
                <el-input
                    type="textarea"
                    :rows="4"
                    v-model="ruleFormEdit.mainClause"
                >
                </el-input>
            </el-col>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="editCarry()">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 修改end -->

    <!-- 查看 导出pdf start -->
    <el-dialog title="查看合同" :visible.sync="dialogFormVisibleSel">
        <button @click="pdfBtn">导出pdf</button>
        <div :model="ruleFormSel" id="demo">
            <tr>
                <td>合同标题:</td>
                <td>{{ruleFormSel.contractTitle}}</td>
            </tr>
            <tr>
                <td>合同编号:</td>
                <td>{{ruleFormSel.contractNum}}</td>
            </tr>
            <tr>
                <td>创建人:</td>
                <td>{{ruleFormSel.creatorId}}</td>
            </tr>
            <tr>
                <td>承运单位:</td>
                <td>{{ruleFormSel.carriageUnit}}</td>
            </tr>
            <tr>
                <td>承运负责人:</td>
                <td>{{ruleFormSel.carriageMan}}</td>
            </tr>
            <tr>
                <td>线路:</td>
                <td>{{ruleFormSel.line}}</td>
            </tr>
            <tr>
                <td>吨运价:</td>
                <td>{{ruleFormSel.freightRates}}</td>
            </tr>
            <tr>
                <td>包车条件吨位:</td>
                <td>{{ruleFormSel.charterConditionTonnage}}</td>
            </tr>
            <tr>
                <td>包车金额:</td>
                <td>{{ruleFormSel.charterValue}}</td>
            </tr>
            <tr>
                <td>经办人:</td>
                <td>{{ruleFormSel.operator}}</td>
            </tr>
            <tr>
                <td>审批人:</td>
                <td>{{ruleFormSel.approver}}</td>
            </tr>
            <tr>
                <td>附件地址:</td>
                <td>{{ruleFormSel.accessory}}</td>
            </tr>
            <tr>
                <td>签订时间:</td>
                <td>{{ruleFormSel.signedTime}}</td>
            </tr>
            <tr>
                <td>合同金额:</td>
                <td>{{ruleFormSel.contractMoney}}</td>
            </tr>
            <tr>
                <td>合同标的或项目说明:</td>
                <td>{{ruleFormSel.projectDescription}}</td>
            </tr>
            <tr>
                <td>合同主要条款/变更条款:</td>
                <td>{{ruleFormSel.mainClause}}</td>
            </tr>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" >确 定</el-button>
        </div>
    </el-dialog>
    <!-- 查看 导出pdf end -->
</div>
</template>

<script>
    //import htmlToPdf from '@/unit/htmlToPdf'
    export default {
        data() {
            return {
                tableData: [
                ],
                multipleSelection: [],
                // 头部搜索 按钮
                formData:{
                    ContractTitle:''
                },
                // 添加 表单
                ruleForm:{
                    ContractTitle:'',
                    ContractNum:'',
                    CreatorId:'',
                    CarriageUnit:'',
                    CarriageMan:'',
                    Line:'',
                    FreightRates:'',
                    CharterConditionTonnage:'',
                    CharterValue:'',
                    Operator:'',
                    Approver:'',
                    Accessory:'',
                    SignedTime:'',
                    ContractMoney:'',
                    ProjectDescription:'',
                    MainClause:''
                },
                // 修改 表单
                ruleFormEdit:{
                    contractTitle:'',
                    contractNum:'',
                    creatorId:'',
                    carriageUnit:'',
                    carriageMan:'',
                    line:'',
                    freightRates:'',
                    charterConditionTonnage:'',
                    charterValue:'',
                    operator:'',
                    approver:'',
                    accessory:'',
                    signedTime:'',
                    contractMoney:'',
                    projectDescription:'',
                    mainClause:''
                },
                // 显示 表单
                ruleFormSel:{
                    contractTitle:'',
                    contractNum:'',
                    creatorId:'',
                    carriageUnit:'',
                    carriageMan:'',
                    line:'',
                    freightRates:'',
                    charterConditionTonnage:'',
                    charterValue:'',
                    operator:'',
                    approver:'',
                    accessory:'',
                    signedTime:'',
                    contractMoney:'',
                    projectDescription:'',
                    mainClause:''
                },
                dialogTableVisible: false,
                
                dialogFormVisible: false, //添加模态框
                dialogFormVisibleEdit: false, //反填模态框
                dialogFormVisibleSel :false,//查看模态框
            }
        },
    created:function(){
        this.getCrray();
    },
    methods: {
        State:function(row){
            if(row.state==-1)
            {
                return "待提交";
            }
            if(row.state==0)
            {
                return "已拒绝";
            }
            if(row.state==1)
            {
                return "待审核";
            }
            if(row.state==-2)
            {
                return "已通过";
            }
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
            this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 显示
        getCrray(){
            this.axios
            .get("https://localhost:44330/api/app/t-mSContract-carrier/carrier?Sorting=id")
            .then((res)=>{
                console.log(res);
                this.tableData=res.data.items;
            })
        },
        // 查看
        handleClick(id){
            this.dialogFormVisibleSel == true;
            console.log(id);
            this.axios
            .get("https://localhost:44330/api/app/t-mSContract-carrier/"+id+"/the-carrier")
            .then((res) => {
                console.log(res.data);
                this.ruleFormSel = res.data;
            });
        },
        // 查询
        sel(){
            this.getCrray();
        },
        // 添加
        addCarry() {
            console.log(this.ruleForm);
            this.axios({
                url: "https://localhost:44330/api/app/t-mSContract-carrier/carrier",
                method: "post",
                data: this.ruleForm,
            }).then((res) => {
                if (res.data.meta == 200) {
                this.$message.success("添加成功");
                this.dialogFormVisible = false; //关闭模态框
                this.reload(); //局部刷新
                } else {
                this.$message.error("添加失败");
                this.dialogFormVisible = false; //关闭模态框
                }
            });
        },
        //反填模态框
        EditCarr(id) {
            this.dialogFormVisibleEdit == true;
            console.log(id);
            this.axios
            .get("https://localhost:44330/api/app/t-mSContract-carrier/"+id+"/the-carrier")
            .then((res) => {
                console.log(res.data);
                this.ruleFormEdit = res.data;
            });
        },
        // 修改
        editCarry() {
            console.log(this.ruleFormEdit);
            this.axios({
                url: "https://localhost:44392/api/app/t-mSContract-carrier/carrier",
                method: "put",
                data: this.ruleFormEdit,
            }).then((res) => {
                if (res.data.meta == 200) {
                this.$message.success("添加成功");
                this.dialogFormVisible = false; //关闭模态框
                this.reload(); //局部刷新
                } else {
                this.$message.error("添加失败");
                this.dialogFormVisible = false; //关闭模态框
                }
            });
        },
        // 删除
        SingledelCarry(id) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(() => {
            this.axios({
                url:
                "https://localhost:44330/api/app/t-mSContract-carrier/carrier?ids=" +
                id,
                method: "delete",
            })
            .then((res) => {
                console.log(res);
                if (res.data.meta == 200) {
                this.$message({
                    type: "success",
                    message: "删除成功!",
                });
                this.reload(); //局部刷新
                } else {
                this.$message.error("删除失败");
                }
            });
            })
            .catch(() => {
            this.$message({
                type: "info",
                message: "已取消删除",
            });
            });
        },
        // pdf 导出
        //pdfBtn(){
          //  htmlToPdf.downloadPDF(document.querySelector('#demo'), '离职申请表')
        //}
    }
}
</script>